<template>
	<view class="account_main">
		<scroll-view class="scroll_box" :refresher-triggered="triggered" refresher-background="transparent"
			@refresherpulling="refresherpulling" refresher-enabled="true" scroll-y="true" @refresherrefresh="onRefresh">
			<view class="blue_style">
				<view class="title_header">
					<view class="title">
						可结算金额(元)
					</view>
					<view class="btn_withdraw" @click="goSelectList">
						去结算
					</view>
				</view>
				<view class="money_total">
					<span
						@click="goSelectList">{{(withdrawObj.withdrawMoney||0).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')}}</span>
				</view>
				<view class="total_apply">
					<view class="" @click="gowithdrawalLog(1)">
						申请结算
						&nbsp;{{(withdrawObj.applyWithdrawMoney||0).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')}}
					</view>
					<view class="" @click="gowithdrawalLog(3)">
						累计结算
						&nbsp;{{(withdrawObj.totalWithdrawMoney||0).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')}}
					</view>
				</view>
			</view>
			<view class="btn_card">
				<view class="btn_card_item" @click="goOrderLog">
					<uni-icons size="32" color="#F56C6C" type="calendar"></uni-icons>
					<span class="word">工单记录</span>
				</view>
				<view class="btn_card_item" @click="gowithdrawalLog(0)">
					<uni-icons size="32" color="#E69103" type="wallet"></uni-icons>
					<span class="word">结算记录</span>
				</view>
				<view class="btn_card_item" @click="goNameTrue">
					<uni-icons color="#00c0c0" size="32" type="auth"></uni-icons>
					<span class="word">实名认证</span>
				</view>
				<view class="btn_card_item" @click="goBankCard">
					<uni-icons size="32" color="#007cff" type="wallet-filled"></uni-icons>
					<span class="word">银行卡</span>
				</view>
			</view>
			<view class="freezing_card">
				<view class="freezing_card_left" @click="tipToast">
					冻结金额<uni-icons type="help" size="20" color="#666"></uni-icons>
				</view>
				<view class="freezing_card_right" @click="goOrderLog(1)">
					￥{{(withdrawObj.freezeMoney||0).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')}} <uni-icons
						size="14" color="#777" type="right"></uni-icons>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script lang="ts" setup>
	import {
		ref,
		onMounted
	} from "vue";
	import apiNetwork from '@/util/network_api/network.js'
	import { onUnload, onLaunch, onLoad, onHide, onShow } from '@dcloudio/uni-app'
	import apiAccount from '@/util/network_api/account.js'
	onUnload(() => {
		uni.hideLoading()
	})
	onLoad(() => {
		getWithdrawMoney()
	})
	const triggered = ref(false)
	// 获取提现账户金额
	const withdrawObj = ref({
		"applyWithdrawMoney": 0,
		"freezeMoney": 0,
		"totalWithdrawMoney": 0,
		"withdrawMoney": 0
	})
	const getWithdrawMoney = async () => {
		uni.showLoading({
			title: '加载中'
		})
		await apiAccount.getWithdrawMoney().then(res => {
			uni.hideLoading()
			if (res.success) {
				withdrawObj.value = res.data.row
			}
		})
	}
	const tipToast = () => {
		uni.showModal({
			title: '冻结金额',
			content: '暂时不可结算的金额。',
			showCancel: false,
			confirmText: '关闭'
		}).then(res => {
			//确认
			if (res.confirm) {

			}
		})
	}
	// 工单记录
	const goOrderLog = (n) => {
		if (n == 1) {
			uni.navigateTo({
				url: '/pages_network/home/myAccount/orderLog?freezeStatus=1'
			})
		} else {
			uni.navigateTo({
				url: '/pages_network/home/myAccount/orderLog'
			})
		}

	}
	// 去提现
	const goSelectList = () => {
		uni.navigateTo({
			url: '/pages_network/home/myAccount/selectList'
		})
	}
	// 提现记录
	const gowithdrawalLog = (status = 0) => {
		uni.navigateTo({
			url: '/pages_network/home/myAccount/withdrawalLog?status=' + status
		})
	}
	// 去实名认证
	const goNameTrue = () => {
		uni.showToast({
			title: "正在维护中，敬请期待...",
			duration: 800,
			icon: "none"
		})
	}
	// 银行卡
	const goBankCard = () => {
		uni.navigateTo({
			url: '/pages_network/home/myAccount/bankCard'
		})
	}
	// 下拉刷新
	const refresherpulling = (e) => {
		if (e.detail.deltaY < 0) return // 防止上滑页面也触发下拉
		triggered.value = true
	}
	const onRefresh = async (e) => {
		await getWithdrawMoney()
		setTimeout(() => {
			triggered.value = false
		}, 800)
	}
</script>


<style lang="scss" scoped>
	.account_main {
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: hidden;
		background-color: #fafafa;
		padding: 32rpx;
		box-sizing: border-box;

		.scroll_box {
			height: 100%;

			.blue_style {
				background-color: #007cff;
				height: 260rpx;
				border-radius: 10rpx;
				padding: 32rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				.title_header {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.title {
						color: #fff;
						font-size: 32rpx;
					}

					.btn_withdraw {
						background-color: #fff;
						font-size: 26rpx;
						padding: 6rpx 12rpx;
						color: #007cff;
						border-radius: 2px;
						font-weight: bold;
						cursor: pointer;
					}
				}

				.money_total {
					color: #fff;
					font-size: 48rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;
				}

				.total_apply {
					display: flex;
					justify-content: space-between;
					font-size: 24rpx;
					color: #fff;
				}
			}

			.btn_card {
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: #fff;
				margin-top: 32rpx;
				border-radius: 10rpx;
				.btn_card_item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-around;
					padding: 32rpx;
					flex: 1;
					box-sizing: border-box;

					.word {
						font-size: 26rpx;
						margin-top: 12rpx;

					}
				}
			}

			.freezing_card {
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #fff;
				padding: 32rpx;
				margin-top: 32rpx;
				border-radius: 10rpx;

				&_left {
					font-size: 28rpx;
					color: #666;
					display: flex;
					align-items: center;
				}

				&_right {
					font-size: 28rpx;
				}
			}
		}
	}
</style>